<template>
  <div class="container">
    <div class="box box1">
      <div class="buju" ref="chartContainer"></div>
      <div class="particles-container"></div> <!-- 新增粒子容器 -->
    </div>
    <div class="box box2">
      <div class="buju" ref="chartContainer2"></div>
      <div class="particles-container"></div> <!-- 新增粒子容器 -->
    </div>
    <div class="box box3">
      <div class="buju" ref="chartContainer3"></div>
      <div class="particles-container"></div> <!-- 新增粒子容器 -->
    </div>
    <div class="box box4">
      <div class="buju" ref="chartContainer4"></div>
      <div class="particles-container"></div> <!-- 新增粒子容器 -->
    </div>
    <div class="box box5">
      <div class="buju" ref="chartContainer5"></div>
      <div class="particles-container"></div>
      <!-- 添加左右箭头 -->
      <div class="arrow left-arrow" @click="switchChart('prev')">❮</div>
      <div class="arrow right-arrow" @click="switchChart('next')">❯</div>
    </div>
    <div class="box box6">
      <div class="buju">
        <div class="dashboard" ref="chartContainer6_1"></div>
        <div class="dashboard" ref="chartContainer6_2"></div>
        <div class="dashboard" ref="chartContainer6_3"></div>
        <div class="dashboard" ref="chartContainer6_4"></div>
        <div class="dashboard" ref="chartContainer6_5"></div>
      </div>
      <div class="particles-container"></div> <!-- 新增粒子容器 -->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import $ from 'jquery'; // 引入 jQuery
import http from "@/http"
export default {
  name: 'App',
  data() {
    return {
      monthData1: [], // 初始化月份数据
      xiangliangData1: [],// 初始化上海数据
      xiangliangData2: [],// 初始化北京数据
      xiangliangData3: [],// 初始化深圳数据
      xiangliangData4: [],// 初始化广州数据
      xiangliangData5: [], // 初始化重庆数据
      hotData: [],
      currentIndex: 0
    };
  },
  async mounted() {
    // 先获取数据
    await this.getData();
    await this.getHotData();

    // 然后初始化图表
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
    this.initChart6();
    this.initParticles();
  },
  methods: {
    async getData() {
      try {
        let ret = await http.get("/trend.json");
        console.log(ret);
        // 将数据保存到组件的 data 中
        this.monthData1 = ret.common.month || [];
        this.xiangliangData1 = ret.map.data[0].data//上海
        this.xiangliangData2 = ret.map.data[1].data//北京
        this.xiangliangData3 = ret.map.data[2].data//深圳
        this.xiangliangData4 = ret.map.data[3].data//广州
        this.xiangliangData5 = ret.map.data[4].data//重庆
      } catch (error) {
        console.error("获取数据失败:", error);
        // 提供默认值以防请求失败
        this.monthData1 = ['1月', '2月', '3月', '4月', '5月', '6月',
          '7月', '8月', '9月', '10月', '11月', '12月'];
      }
    },
    async getHotData() {
      try {
        const response = await fetch('/hot.json');
        this.hotData = await response.json();
      } catch (error) {
        console.error('获取 hot.json 数据失败:', error);
      }
    },
    // 新增粒子效果初始化方法
    initParticles() {
      const containers = document.querySelectorAll('.particles-container');

      containers.forEach(container => {
        const count = 60; // 粒子数量
        const particles = [];

        for (let i = 0; i < count; i++) {
          const particle = document.createElement('div');
          particle.className = 'particle';
          container.appendChild(particle);
          particles.push(particle);

          // 设置随机位置
          const side = Math.floor(Math.random() * 4); // 0:上, 1:右, 2:下, 3:左
          let posX, posY;

          switch (side) {
            case 0: // 上边
              posX = Math.random() * 100;
              posY = 0;
              break;
            case 1: // 右边
              posX = 100;
              posY = Math.random() * 100;
              break;
            case 2: // 下边
              posX = Math.random() * 100;
              posY = 100;
              break;
            case 3: // 左边
              posX = 0;
              posY = Math.random() * 100;
              break;
          }

          particle.style.setProperty('--x', `${posX}%`);
          particle.style.setProperty('--y', `${posY}%`);

          // 随机大小和动画延迟
          const size = Math.random() * 4 + 2;
          const delay = Math.random() * 5;
          particle.style.width = `${size}px`;
          particle.style.height = `${size}px`;
          particle.style.animationDelay = `${delay}s`;
        }
      });
    },
    initChart1() {
      const chartDom = this.$refs.chartContainer;
      const myChart = echarts.init(chartDom);

      // 使用获取到的月份数据，如果为空则使用默认值
      const monthData = this.monthData1.length > 0
        ? this.monthData1
        : ['1月', '2月', '3月', '4月', '5月', '6月',
          '7月', '8月', '9月', '10月', '11月', '12月'];
      console.log(monthData);

      const option = {
        color: ["rgb(250,105,0)", "rgb(254,33,30)", "rgb(22,239,214)", "rgb(44,109,252)", "rgb(11,167,44)"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['上海', '北京', '广州', '深圳', '重庆'],
          icon: "circle",
          textStyle: {
            color: "white"
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: monthData, // 使用获取到的月份数据
            name: '月份',
            nameTextStyle: {
              color: 'white'
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '上海',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: 'rgba(128, 255, 165, 0.8)'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236,0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xiangliangData1
          },
          {
            name: '北京',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: 'rgba(0, 221, 255, 0.8)'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255,0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xiangliangData2
          },
          {
            name: '广州',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: 'rgba(55, 162, 255, 0.8)'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xiangliangData3
          },
          {
            name: '深圳',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: 'rgba(255, 0, 135, 0.8)'
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xiangliangData4
          },
          {
            name: '重庆',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2,
              color: 'rgba(255, 191, 0, 0.8)'
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xiangliangData5
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    initChart2() {
      const chartDom = this.$refs.chartContainer2;
      const myChart = echarts.init(chartDom);

      // 读取 seller.json 文件
      fetch('/seller.json')
        .then(response => response.json())
        .then(data => {
          // 按销量从多到少排序
          data.sort((a, b) => b.value - a.value);

          let currentIndex = 0;

          const updateChart = () => {
            // 取出当前的五个数据
            const currentData = data.slice(currentIndex, currentIndex + 5);

            let yName = currentData.map((item) => item.name);
            let xData = currentData.map((item) => item.value);
            let barWidth = 14;

            let colorList = [
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#bbfbff',
                },
                {
                  offset: 0,
                  color: '#45c2c9',
                },
              ]),
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#f58ac7',
                },
                {
                  offset: 0,
                  color: '#cf3bae',
                },
              ]),
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#dc7815',
                },
                {
                  offset: 0,
                  color: '#ef4600',
                },
              ]),
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#64f9ac',
                },
                {
                  offset: 0,
                  color: '#68ee8d',
                },
              ]),
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#ddff5e',
                },
                {
                  offset: 0,
                  color: '#f2f349',
                },
              ]),
              new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#45c9fe',
                },
                {
                  offset: 0,
                  color: '#2c6ff2',
                },
              ]),
            ];

            const option = {
              backgroundColor: 'black',
              xAxis: {
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
              },
              grid: {
                right: 100,
                left: 80
              },
              yAxis: [
                {
                  inverse: true,
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: '#fff',
                    },
                  },
                  data: yName,
                },
              ],
              series: [
                {
                  // 内
                  type: 'bar',
                  barWidth,
                  legendHoverLink: false,
                  symbolRepeat: true,
                  silent: true,
                  itemStyle: {
                    color: function (params) {
                      return colorList[params.dataIndex];
                    },
                  },
                  data: currentData,
                  z: 1,
                },
                {
                  // 背景
                  type: 'pictorialBar',
                  animationDuration: 0,
                  symbolRepeat: 'fixed',
                  symbolMargin: '20%',
                  symbol: 'roundRect',
                  symbolSize: [14, barWidth],
                  itemStyle: {
                    normal: {
                      color: '#1b346f',
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'right',
                      offset: [0, 2],
                      distance: 30,
                      textStyle: {
                        color: '#7AF8FF',
                      },
                      formatter: function (params) {
                        return '{value|' + params.data + '}'; // 去掉百分比符号
                      },
                      rich: {
                        value: {
                          fontSize: 24,
                          fontWeight: 600,
                        },
                      },
                    },
                  },
                  data: xData,
                  z: 0,
                },
                {
                  // 分隔
                  type: 'pictorialBar',
                  itemStyle: {
                    color: '#000',
                  },
                  symbolRepeat: 'fixed',
                  symbolMargin: 6,
                  symbol: 'roundRect',
                  symbolClip: true,
                  symbolSize: [4, barWidth + 1],
                  symbolPosition: 'start',
                  symbolOffset: [0, 0],
                  data: currentData,
                  z: 2,
                },
              ],
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}' // 显示实际数量
              },
              ws: null
            };

            myChart.setOption(option);

            // 更新索引
            currentIndex = (currentIndex + 5) % data.length;
          };

          // 初始更新
          updateChart();

          // 设置定时器，每五秒更新一次
          setInterval(updateChart, 5000);
        })
        .catch(error => {
          console.error('读取 seller.json 文件失败:', error);
        });

      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    initChart3() {
      const chartDom = this.$refs.chartContainer3;
      const myChart = echarts.init(chartDom);

      // 使用新的地图数据源
      $.get("https://www.isqqw.com/asset/get/areas_v3/country/china.json", function (geoJson) {
        echarts.registerMap('china', geoJson);

        // 示例数据 - 五个重点城市
        let data1 = [
          { name: "北京", value: [116.405285, 39.904989, 116.405285, 39.904989, 49] },
          { name: "天津", value: [117.190182, 39.125596, 117.190182, 39.125596, 18] },
          { name: "河北", value: [114.502461, 38.045474, 114.502461, 38.045474, 97] },
          { name: "山西", value: [112.549248, 37.857014, 112.549248, 37.857014, 85] },
          { name: "内蒙古", value: [111.670801, 40.818311, 111.670801, 40.818311, 83] }
        ];

        const option = {
          tooltip: {
            trigger: "item",
            formatter: function (params, ticket, callback) {
              if (params.seriesType === "scatter") {
                return "地区：" + params.data.name + "<br>数值：" + params.data.value[4];
              } else if (params.seriesType === "lines") {
                return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
              }
            }
          },
          visualMap: {
            show: false,
            min: 0,
            max: 100,
            calculable: true,
            inRange: { color: ['#004693'] }
          },
          geo: {
            show: true,
            map: 'china',
            roam: false, // 允许缩放和拖动
            zoom: 1.2, // 初始缩放级别
            label: {
              show: true,
              padding: 4,
              color: '#ddd' // 省份标签颜色
            },
            itemStyle: {
              normal: {
                areaColor: '#031525', // 地图区域颜色
                borderWidth: 1,
                borderColor: '#00CFFC', // 边界线颜色
              },
              emphasis: {
                areaColor: '#2B91B7', // 鼠标悬停时的区域颜色
              }
            }
          },
          series: [
            // 地图底图
            {
              type: 'map',
              map: 'china',
              geoIndex: 0,
              roam: true,
              aspectScale: 0.75, // 长宽比
              label: {
                normal: { show: true },
                emphasis: { show: false }
              },
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#3B5077'
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              },
              animation: false,
              data: data1
            },
            // 红色小圆点
            {
              name: '散点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 5,
              itemStyle: { normal: { color: 'red' } },
              zlevel: 10,
              data: data1
            },
            // 大头针标记
            {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: 40,
              label: {
                show: true,
                formatter: function (parm) {
                  return parm.value[4]; // 显示数值
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  fontWeight: 'bold'
                }
              },
              itemStyle: {
                color: '#F62157' // 大头针颜色
              },
              zlevel: 6,
              data: data1
            }
          ]
        };

        myChart.setOption(option);
      });

      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    initChart4() {
      const chartDom = this.$refs.chartContainer4;
      const myChart = echarts.init(chartDom);

      // 读取 rank.json 文件
      fetch('/rank.json')
        .then(response => response.json())
        .then(data => {
          // 按销量从多到少排序
          data.sort((a, b) => b.value - a.value);

          let currentIndex = 0;

          const updateChart = () => {
            if (currentIndex + 10 >= data.length) {
              currentIndex = 0; // 如果到了最后十个数据，重置索引
            }
            // 取出当前的 10 个数据
            const currentData = data.slice(currentIndex, currentIndex + 10);

            let xName = currentData.map((item) => item.name); // 地区名称作为X轴
            let yData = currentData.map((item) => item.value); // 销量作为Y轴
            let barWidth = 30;

            let colorList = [
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#bbfbff',
                },
                {
                  offset: 0,
                  color: '#45c2c9',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#f58ac7',
                },
                {
                  offset: 0,
                  color: '#cf3bae',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#dc7815',
                },
                {
                  offset: 0,
                  color: '#ef4600',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#64f9ac',
                },
                {
                  offset: 0,
                  color: '#68ee8d',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#ddff5e',
                },
                {
                  offset: 0,
                  color: '#f2f349',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#45c9fe',
                },
                {
                  offset: 0,
                  color: '#2c6ff2',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#bbfbff',
                },
                {
                  offset: 0,
                  color: '#45c2c9',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#f58ac7',
                },
                {
                  offset: 0,
                  color: '#cf3bae',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#dc7815',
                },
                {
                  offset: 0,
                  color: '#ef4600',
                },
              ]),
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#64f9ac',
                },
                {
                  offset: 0,
                  color: '#68ee8d',
                },
              ]),
            ];

            const option = {
              backgroundColor: 'black',
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
              },
              xAxis: {
                type: 'category',
                data: xName,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                    rotate: 45, // 旋转标签以便更好显示
                    align: 'right'
                  },
                },
                splitLine: {
                  show: false
                }
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#fff',
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                  }
                }
              },
              grid: {
                left: '5%',
                right: '5%',
                bottom: '5%', // 增加底部空间以显示X轴标签
                top: '15%',
                containLabel: true
              },
              series: [
                {
                  // 主柱状图
                  type: 'bar',
                  barWidth: barWidth,
                  data: yData,
                  itemStyle: {
                    color: function (params) {
                      return colorList[params.dataIndex];
                    }
                  },
                  z: 1,
                  label: {
                    show: true,
                    position: 'top', // 数值标签显示在柱子顶部
                    textStyle: {
                      color: '#fff',
                      fontSize: 14
                    },
                    formatter: '{c}'
                  }
                },
                {
                  // 背景条
                  type: 'bar',
                  barWidth: barWidth,
                  data: yData.map(() => Math.max(...yData)), // 背景条高度为最大值
                  itemStyle: {
                    color: 'rgba(27, 52, 111, 0.3)' // 半透明背景色
                  },
                  z: 0
                }
              ]
            };

            myChart.setOption(option);

            // 更新索引
            currentIndex += 1;
          };

          // 初始更新
          updateChart();

          // 设置定时器，每五秒更新一次
          setInterval(updateChart, 5000);
        })
        .catch(error => {
          console.error('读取 rank.json 文件失败:', error);
        });

      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    initChart5() {
      const chartDom = this.$refs.chartContainer5;
      const myChart = echarts.init(chartDom);

      const updateChart = () => {
        const currentCategory = this.hotData[this.currentIndex];
        const categoryName = currentCategory.name;
        const childrenData = currentCategory.children;

        const data = childrenData.map(item => ({
          value: item.value,
          name: item.name
        }));

        const option = {
          title: {
            text: categoryName,
            left: '70%',
            bottom: '5%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal', // 修改为水平排列
            top: '2%', // 调整位置到底部
            left: 'center', // 水平居中
            textStyle: {
              color: '#fff', // 图例文字颜色设置为白色
              fontSize: 15
            }
          },
          series: [
            {
              name: categoryName,
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '50%'],
              top: "10%",
              label: {
                textStyle: {
                  color: '#fff', // 饼图文字标注颜色设置为白色
                  fontSize: 18
                }
              },
              data: data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
              }
            }
          ]
        };

        myChart.setOption(option);
      };

      // 初始更新
      updateChart();

      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    initChart6() {
      const colors = ["#466CF7", "#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"];
      const values = [346, 567, 234, 789, 456];
      const max = 1000;

      const refs = [
        this.$refs.chartContainer6_1,
        this.$refs.chartContainer6_2,
        this.$refs.chartContainer6_3,
        this.$refs.chartContainer6_4,
        this.$refs.chartContainer6_5
      ];

      refs.forEach((ref, index) => {
        const chartDom = ref;
        const myChart = echarts.init(chartDom);
        const value = values[index];
        const rate = Math.round((value * 1000) / max);

        const option = {
          title: [
            {
              text: '{a|政府采购}\n{b|' + rate + '}',
              show: true,
              x: 'center',
              y: 'center',
              textStyle: {
                rich: {
                  a: {
                    fontSize: 20,
                    color: '#808080',
                    padding: [0, 0, 15, 0]
                  },
                  b: {
                    fontSize: 20,
                    color: '#333333'
                  }
                }
              }
            }
          ],
          tooltip: {
            show: true,
            formatter: '{c}个'
          },
          polar: {
            center: ['50%', '50%'],
            radius: ['60%', '75%']
          },
          angleAxis: {
            max: max,
            startAngle: 120,
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: '',
              type: 'bar',
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: '#F3F2F7'
              },
              data: [value],
              coordinateSystem: 'polar',
              itemStyle: {
                normal: {
                  color: colors[index]
                }
              }
            }
          ]
        };

        myChart.setOption(option);

        window.addEventListener('resize', function () {
          myChart.resize();
        });
      });
    },
    switchChart(direction) {
      if (direction === 'prev') {
        this.currentIndex = (this.currentIndex - 1 + this.hotData.length) % this.hotData.length;
      } else {
        this.currentIndex = (this.currentIndex + 1) % this.hotData.length;
      }
      this.initChart5();
    }
  }
};
</script>

<style>
/* 全局样式 */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: #000;
}

.box {

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 新增 */
}

.box1 {
  width: 25vw;
  height: 55vh;
  background-color: rgba(0, 247, 255, 0.2);
}

.box2 {
  width: 25vw;
  height: 45vh;
  background-color: rgba(0, 247, 255, 0.2);

}

.box3 {
  width: 50vw;
  height: 65vh;
  background-color: rgba(0, 247, 255, 0.2);

}

.box4 {
  width: 50vw;
  height: 35vh;
  background-color: rgba(0, 247, 255, 0.2);
}

.box5 {
  width: 25vw;
  height: 50vh;
  background-color: rgba(0, 247, 255, 0.2);

}

.box6 {
  width: 25vw;
  height: 50vh;
  background-color: rgba(0, 247, 255, 0.2);

}

.buju {
  width: 95%;
  height: 95%;
  background-color: rgba(10, 15, 30, 0.8);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 247, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

.dashboard {
  width: 30%;
  height: 50%;
}

/* 新增粒子效果样式 */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.particle {
  position: absolute;
  background: #00f7ff;
  border-radius: 50%;
  box-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff;
  opacity: 0.7;
  animation: moveParticle 5s linear infinite;
  left: var(--x, 0);
  top: var(--y, 0);
  transform: translate(-50%, -50%);
}

@keyframes moveParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  /* 半透明背景 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  /* 确保在图表和粒子效果之上 */
  font-size: 20px;
  color: #fff;
  user-select: none;
  transition: background-color 0.3s;
}

.arrow:hover {
  background-color: rgba(255, 255, 255, 0.5);
  /* 鼠标悬停时更明显 */
}

.left-arrow {
  left: 15px;
}

.right-arrow {
  right: 15px;
}
</style>